<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "Hello, 70",
      age: 70,
    };
  },
  // 更新阶段的钩子函数
  // 1.如果vue变量没有被使用在DOM中,vue变量发生变化,DOM不跟新,下面的两个钩子函数都不会被触发
  // 更新阶段,如果使用querySelector获取DOM元素
  // 2.因为对象保存的是引用店址,因此打印出来的DOM对象.一模一样
  // 可以通过innerText来观察字符串的改变
  beforeUpdate() {
    console.log(
      document.querySelector("h1").innerText,
      "beforeUpdate,获取h1标签"
    );
    console.log("beforeUpdate被触发");
  },
  // 注意:一定是在DOM更新之后,updated才会被触发
  updated() {
    console.log(
      document.querySelector("h1").innerText,
      "beforeUpdate,获取h1标签"
    );
    console.log("Updated被触发");
  },
};
</script>

<style>
</style>